<template>
    <div>
        <div class="backTo"  @click="toback">
            <span class="iconfont icon-shanchu1"></span>
        </div>
        <div class="mask_con">
        <!-- 标题头部 -->
           <div class="mask_title">
               <div class="icon">
                   <img src="../assets/img/boji.jpg" alt="波吉">
               </div>
               <div class="text">
                   <span>{{author}}</span>
                   <span>3年前</span>
               </div>
               <div class="more">
                    <span class="iconfont icon-more"></span>
               </div>
           </div>
        <!-- 内容 -->
            <div class="container_m">
                <p>
                    {{desc}}
                </p>
            </div>
        <!-- 卡片 -->
          <div class="card_sign">
              <div class="card_date">
                <div class="line"></div>
                <span class="f_left">12</span>
                <p>21</p>
              </div>
              <div class="card_text">
                <span class="text_t">宜开山见门</span>
                <span class="text_b">冬至之晨杀人记，林语堂</span>
              </div>
        </div>
        <!-- 点赞与评论 -->
        <div class="mask_share">
            <div class="icon_l f_left">
                <div class="common">
                     <span class="iconfont icon-liaotian"></span>
                     <span>1</span>
                </div>
                <div class="collect">
                     <span class="iconfont icon-kongaixin"></span>
                     <span>23</span>
                </div>
            </div>
            <div class="icon_r f_right">
                 <span class="iconfont icon-fenxiang"></span>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
      return{
        author: "",
        desc: "",
      }
    },
    methods:{
        toback(){
            this.$router.go(-1);
        }
    },
    created(){
        let msg = this.$route.params;
        this.author = msg.author;
        this.desc = msg.desc;
        // console.log(this.$route.params);
    },
}
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";

.backTo{
    height: 38px;
    margin-top: 10px;
    span{
        color : #fff;
        font-size: 20px;
        padding-left: 20px;
    }
}
.mask_con{
    width: 340px;
    height: 600px;
    border-radius: 20px;
    margin-left: 20px;
    background-color: #fff;
    .mask_title{
        height: 50px;
        div{
            display: inline-block;
        }
        .icon{
            width: 50px;
            margin-left: 5px;
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
        .text{
            width: 100px;
            margin-left: 20px;
            span{
                display: block;
                &:first-child{
                    font-weight: bold;
                    font-size: 18px;
                }
                &:last-child{
                    font-size: 14px;
                }
            }
        }
        .more{
            width: 50px;
            float: right;
        }
    }
    .container_m{
        width: 310px;
        height: 160px;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-top: 10px;
        padding-left: 15px;
        font-size: 20px;
    }
    .card_sign {
    width: 300px;
    height: 60px;
    margin-left: 15px;
    border: 1px solid #cad3c8;
    border-radius: 5px;
    position: relative;
    .card_date {
      width: 60px;
      height: 60px;
      position: absolute;
      color: #a7b0ba;
      border-right: 1px solid #cad3c8;
      .line {
        width: 1px;
        height: 50px;
        position: absolute;
        background: #a7b0ba;
        transform: rotate(45deg);
        margin-left: 30px;
        margin-top: 5px;
      }
      span {
        width: 25px;
        height: 28px;
        display: block;
        font-size: 20px;
        padding-left: 8px;
      }
      p {
        padding-top: 5px;
        padding-left: 15px;
        font-size: 20px;
      }
   
    }
     .card_text {
      height: 60px;
      width: 155px;
      position: absolute;
      padding-top: 5px;
      padding-left: 10px;
      margin-left: 60px;
      line-height: 25px;
      span {
        display: block;
      }
      .text_t {
        color: #8f8f8f;
        font-weight: bold;
        font-size: 18px;
      }
      .text_b {
        color: #a7b0ba;
        font-size: 12px;
      }
     }
   }
   .mask_share{
       margin-top: 20px;
       height: 50px;
       .icon_l{
           width: 200px;
           display: flex;
           div{
               margin-left: 15px;
               color: #808080;
               span{
                   font-size: 16px;
               }
           }
           .common{
               span{
                   &:first-child{
                   font-size: 20px;
                  }
               }
           }
       }
       .icon_r{
           width: 20px;
           padding-right: 20px;
           color: #808080;
           span{
           font-size: 18px;
           }
       }
   }
}
</style>